<script setup lang='ts'>
import { showFailToast } from "vant";
import { ref, onMounted } from "vue"
import { useRouter } from "vue-router";

const $router = useRouter()
const currentBook = ref<any>([])
const querys = $router.currentRoute.value.query

onMounted(() => {

    let all = JSON.parse(`${localStorage.getItem('chapter-buy')}`)
    currentBook.value = all.filter((o: any) => o.book == querys.id)
})

const toBookContent = (chapter: any, index: number) => {
    if (!chapter.needPay) {
        $router.push({
            path: '/content', query: {
                source_uuid: currentBook.value[0].book, content_uuid: chapter.uuid, title: currentBook.value[0].title, index: index
            }
        })
    } else {
        showFailToast('资源缺失！')
    }



}
</script>

<template>
    <div class="chapter">
        <div class="title">
            <img src="@/assets/imgs/返回1.png" alt="" @click="$router.back()">
            <span>购买列表</span>
            <span></span>
        </div>
        <div class="book">
            <img :src="currentBook[0]?.img + '?imageView&thumbnail=240y336'" alt="">
            <div class="msg">
                <p>{{ currentBook[0]?.title }}</p>
                <span>{{ currentBook[0]?.author }}</span>
            </div>
        </div>
        <div class="book-list">
            <span>目录</span>
            <ul class="list">
                <li v-for="(chapter, index) in currentBook[0]?.chapters" :key="index"
                    @click="toBookContent(chapter, index)">
                    <span>{{ chapter.title }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>

<style lang="less" scoped>
.chapter {
    width: 100vw;
    height: 100vh;
    padding-top: 0;
    display: flex;
    flex-direction: column;

    .title {
        flex-shrink: 0;
        display: flex;
        height: 50rem;
        align-items: center;
        justify-content: space-between;
        border-bottom: 1px solid #eee;

        img {
            width: 30rem;
            height: 30rem;
        }

        span {
            font-size: 17rem;
            color: #333;
        }

    }

    .book {
        flex-shrink: 0;
        display: flex;
        // flex-direction: column;
        align-items: flex-end;
        padding: 20rem 10rem 0;

        img {
            width: 90rem;
        }

        .msg {
            margin-left: 15rem;

            p {
                font-size: 16rem;
            }

            span {
                font-size: 14rem;
            }
        }
    }

    .book-list {
        flex-grow: 1;
        padding: 20rem 10rem 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;

        >span {
            font-size: 16rem;
            flex-shrink: 0;
        }

        ul.list {
            flex-grow: 1;
            overflow: auto;

            li {
                margin: 10rem 0;

                span {
                    font-size: 14rem;
                }
            }
        }
    }
}
</style>
